<template>
  <div>
    <el-page-header @back="goBack" content="公告详情">
      <template slot="title">
        <el-link type="primary">查看更多</el-link>
      </template>
    </el-page-header>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="18">
            <el-tag type="success" effect="dark" v-text="notice.title"></el-tag>
          </el-col>
          <el-col :span="3" :offset="3">
            <span class="author">
              作者：
              <span v-html="notice.editor"></span>
            </span>
          </el-col>
        </el-row>
      </div>
      <h4 v-html="notice.content"></h4>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notice: {}
    };
  },
  methods: {
    getNoticeById(id) {
      this.$http
        .get(`/notice/noAuthorize/id/${id}`)
        .then(resp => {
          let { data, code, msg } = resp.data;
          if (code == 1) {
            this.notice = data.notice;
          }
        })
        .catch(resp => {});
    },
    goBack() {
      this.$router.push("/notice");
    }
  },
  created() {
    let id = this.$route.query.noticeId;
    if (id) {
      return this.getNoticeById(id);
    }
  }
};
</script>

<style scoped lang='less'>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 700px;
  margin-top: 20px;
  margin-left: 30px;
}
.el-card {
  width: 900px;
}

.el-tag {
  font-size: 20px;
}
.el-page-header {
  margin-top: 20px;
  margin-bottom: 10px;
}
.el-card {
  border-radius: 30px;
}
</style>